<template>
  <div class="coupon">
    <div class="fixed-box" v-if="isTabShow">
      <div class="tab-wrapper">
        <div
          v-for="(item, index) in [
            '全部',
            '待激活',
            '已激活',
            '已转增',
            '已完结',
          ]"
          :key="index"
          class="item"
          :class="{ active: index == activeIndex }"
          @click="onTabs(index)"
        >
          {{ item }}
          <text class="bar-hr"></text>
        </div>
      </div>
    </div>

    <div class="list-box">
      <a
        class="tips-text"
        hover-class="none"
        url="/pages/coupon/couponExplain/couponExplain"
      >
        卡券说明<text class="help-icon"></text>
      </a>
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="mask-box"></div>
        <div
          class="main"
          :style="{ 'background-image': `url(${item.card_cover_picture})` }"
        >
          <div class="lb-box">{{ stateList[item.state] }}</div>
          <div class="info-box">
            <div class="left">
              <img
                mode="scaleToFill"
                :src="item.merchant.logo"
                class="img-size-100"
              />
            </div>
            <div class="right">
              <div class="title">{{ item.merchant.name }}</div>
              <div class="subtitle van-multi-ellipsis--l2">
                {{ item.card_title }}
              </div>
            </div>
          </div>
          <div
            class="click-box"
            @click="toLink(item.state, item.id, item.card_no)"
            v-if="
              item.state == 1 ||
                item.state == 2 ||
                item.state == 3 ||
                item.state == 4
            "
          ></div>
          <div class="footer-box" v-if="item.state == 0 || item.state == 1">
            <block v-if="item.state == 0">
              <div
                class="link-btn"
                @click="
                  linkTo(
                    `/pages/coupon/couponActivation/couponActivation?id=${item.id}`
                  )
                "
              >
                去激活<text class="arrow-q-icon"></text>
              </div>
              <div class="v-hr"></div>
              <div
                v-if="item.user_id == item.owner_user_id"
                class="link-btn"
                @click="
                  linkTo(`/pages/coupon/couponSend/couponSend?id=${item.id}`)
                "
              >
                去转赠<text class="arrow-q-icon"></text>
              </div>
            </block>
            <div v-if="item.state == 1" class="link-btn">
              去使用<text class="arrow-q-icon"></text>
            </div>
          </div>
        </div>
      </div>
    </div>
    <base-empty v-if="total == 0" />
    <uni-load-more
      :status="status"
      :icon-size="12"
      :content-text="contentText"
      v-if="total > 5"
    />
    <van-popup
      :show="isShowRules"
      @close="isShowRules = false"
      round="10"
      closeable="true"
    >
      <div class="rule-main">
        <div class="title"></div>
        <div class="main">
          <div class="txt">
            1.
            您邀请的好友将”终身“绑定到您会员团队中，TA在平台的所有消费您都可获得分佣。
          </div>
          <div class="txt">
            2.您的好友再邀请的会员也将成为您的间接会员，间接会员在平台的所有消费您也同时获得分佣。
          </div>
          <div class="txt">
            3.当您邀请的人数达到{{
              pageData.share_upgrade
            }}个会员后，您将自动晋级为”中佣达人“，中佣达人将获得更多的消费返币。
          </div>
          <div class="txt">
            4.如有疑问请联系美时汇客服。
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { mapState } from "vuex";
import checkLogin from "../../common/check-login.js";
import uniLoadMore from "@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue";
const appScene = wx.getLaunchOptionsSync().scene;
export default {
  components: {
    uniLoadMore,
  },
  data() {
    return {
      orderNo: "",
      stateList: ["待激活", "已激活", "已转增", "已完结", "已过期"],
      activeIndex: 0,
      isShowRules: false,
      isTabShow: true,
      list: [],
      currentPage: 0,
      total: 10,
      pageSize: 20,
      status: "more",
      contentText: {
        contentdown: "上拉加载更多",
        contentrefresh: "加载中...",
        contentnomore: "没有更多了",
      },
    };
  },
  watch: {
    userInfo(n) {
      if (appScene === 1035 && (!n.nick_name || !n.mobile)) {
        // checkLogin("/pages/coupon/coupon");
      }
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  onReachBottom() {
    this.getCardList();
  },
  onLoad(options) {
    if (options.orderNo) {
      this.isTabShow = false;
    }
    if (options.orderNo) {
      this.orderNo = options.orderNo;
      this.getCardList(options.orderNo);
    }
  },
  onShow(options) {
    if (
      appScene === 1035 &&
      (!this.userInfo.nick_name || !this.userInfo.mobile)
    ) {
      checkLogin("/pages/coupon/coupon");
    }
    if (!this.orderNo) {
      this.currentPage = 0;
      this.total = 10;
      this.getCardList();
    }
  },
  methods: {
    toLink(state, id, card_no) {
      let url =
        state == 2
          ? "/pages/coupon/couponSended/couponSended"
          : "/pages/coupon/couponActivationed/couponActivationed";
      uni.navigateTo({
        url: `${url}?id=${id}&card_no=${card_no}`,
      });
    },
    getCardList(order_no = "") {
      if (this.currentPage >= Math.ceil(this.total / this.pageSize)) {
        this.status = "noMore";
        return;
      }
      this.status = "loading";
      this.$api
        .getCardList({
          type: this.activeIndex - 1 >= 0 ? this.activeIndex - 1 : "",
          pageSize: this.pageSize,
          page: this.currentPage + 1,
          order_no,
        })
        .then((res) => {
          if (res.code == 200) {
            this.total = res.data.total;
            this.currentPage++;
            if (this.currentPage >= Math.ceil(this.total / this.pageSize)) {
              this.status = "noMore";
            } else {
              this.status = "more";
            }
            if (this.currentPage == 1) {
              this.list = [];
            }
            this.list = this.list.concat(res.data.data);
          }
        });
    },
    onTabs(index) {
      this.activeIndex = index;
      this.currentPage = 0;
      this.total = 10;
      this.getCardList();
    },
    linkTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>
<style lang="scss">
.coupon {
  min-height: 100vh;
  background: #f4f4f4;
  font-size: 24rpx;
  .fixed-box {
    height: 88rpx;
  }
  .tab-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 88rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50rpx;
    color: #666;
    font-size: 28rpx;
    box-sizing: border-box;
    .item {
      height: 100%;
      position: relative;
      line-height: 88rpx;

      &.active {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        .bar-hr {
          width: 40rpx;
          height: 4rpx;
          background: #1772ff;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .list-box {
    padding: 0 30rpx 30rpx;
    box-sizing: border-box;
    .tips-text {
      color: #1772ff;
      font-size: 24rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 20rpx 0;
      .help-icon {
        width: 28rpx;
        height: 28rpx;
        background: url(https://media.wxcwy.com/mini/images/expre_icon@2x.png) no-repeat;
        background-size: 100%;
        margin-left: 4rpx;
      }
    }
    .item {
      height: 240rpx;
      border-radius: 20rpx;
      overflow: hidden;
      background: #dedede;
      margin-bottom: 20rpx;
      position: relative;
      .click-box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
      }
      .main {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        padding: 32rpx 28rpx;
        box-sizing: border-box;
        background-size: 100% auto;
        background-position: left top;
      }
      .mask-box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0) 100%
        );
        opacity: 0.5;
        z-index: 1;
      }
      .lb-box {
        color: #fff;
        line-height: 40rpx;
        height: 40rpx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 20rpx;
        padding: 0 14rpx;
        position: absolute;
        top: 32rpx;
        right: 40rpx;
      }
      .info-box {
        display: flex;
        .left {
          flex: 0 0 80rpx;
          height: 80rpx;
          border-radius: 50%;
          border: 2rpx solid #fff;
          overflow: hidden;
        }
        .right {
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 10rpx;
          .title {
            font-size: 32rpx;
          }
          .subtitle {
            font-size: 24rpx;
            opacity: 0.8;
          }
        }
      }
      .footer-box {
        height: 60rpx;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: #fff;
        display: flex;
        text-align: center;
        align-items: center;

        .v-hr {
          width: 1rpx;
          height: 32rpx;
          background: #fff;
        }
        .link-btn {
          flex: 1;
          height: 100%;
          align-items: center;
          justify-content: center;
          align-items: center;
          display: flex;
          font-size: 26rpx;
          .arrow-q-icon {
            width: 24rpx;
            height: 24rpx;
            background: url(https://media.wxcwy.com/mini/images/morewi_icoc@2x.png) no-repeat;
            background-size: 100%;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
  .rule-main {
    width: 600rpx;
    box-sizing: border-box;
    padding: 40rpx 30rpx;
    overflow: hidden;
    color: #666666;
    font-size: 28rpx;
    line-height: 40rpx;
    border-radius: 20rpx;
    .title {
      margin: 0 auto 40rpx;
      width: 239rpx;
      height: 34rpx;
      background: url(https://media.wxcwy.com/mini/images/gz_title@2x.png) no-repeat center center;
      background-size: 100% 100%;
    }
    .main {
      overflow: hidden;
      .txt {
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>
